<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui">
  <div class="subPanelEnlaces">
    <div class="tituloPanel">Links de Interes</div>
    <p:scrollPanel id="panelEnlacesInteres" styleClass="panelEnlaces">
      <ui:repeat var="_item"
        value="#{articulosRelacionadosBean.articulosRelacionados}">
        <div class="enlaceRelacionado">
          <div class="contenedorImagen">
            <h:graphicImage value="#{_item.rutaImagen}"
              styleClass="imagenRelacionada" />
          </div>
          <div class="contenidoEnlace">
            <h:outputLink value="#{_item.urlPost}" target="_blank">
              <h:outputLabel value="#{_item.tituloPost}" />
            </h:outputLink>
          </div>
        </div>
      </ui:repeat>
    </p:scrollPanel>
    <p:socket channel="/LinkRelacionadoCanal">
      <p:ajax event="message" update="panelEnlacesInteres" />
    </p:socket>
  </div>
  <div class="subPanelEnlaces">
    <div class="tituloPanel">Enlaces Relacionados</div>
    <p:scrollPanel id="panelEnlacesRelacionados" styleClass="panelEnlaces">
      <ui:repeat var="_item"
        value="#{articulosRelacionadosBean.articulosRelacionados}">
        <div class="enlaceRelacionado">
          <div class="contenedorImagen">
            <h:graphicImage value="#{_item.rutaImagen}"
              styleClass="imagenRelacionada" />
          </div>
          <div class="contenidoEnlace">
            <h:outputLink value="#{_item.urlPost}" target="_blank">
              <h:outputLabel value="#{_item.tituloPost}" />
            </h:outputLink>
          </div>
        </div>
      </ui:repeat>
    </p:scrollPanel>
    <p:socket channel="/LinkRelacionadoCanal">
      <p:ajax event="message" update="panelEnlacesRelacionados" />
    </p:socket>
  </div>
</ui:composition>